﻿<script>   
    $(document).ready(function() {
		createSpitter();
		createChart();
    });      
	
	function createChart() {
		$("#chartNumberDaily").kendoChart({
			dataSource: {
                            transport: {
                                read: {
                                        url: "/statistic/getNumberDaily",
                                        dataType: "json"
                                },                                
                            },
                            change: function (e, data) {	
                                var height = e.items.length*35;
                                
                                $("#chartNumberDaily").css("height",height);
                                $("#chartNumberDaily").data("kendoChart").refresh();
                            },
			},
			title: {
				text: "Site number daily"
			},
			legend: {
				position: "top"
			},
			seriesDefaults: {
				type: "bar"
			},
			series:
			[{
				field: "newCount",
				name: "New"
			}, {
				field: "scamCount",
				name: "Scam"
			}],
			categoryAxis: {
				field: "date",
				labels: {
					rotation: 0
				}
			},
			valueAxis: {
				labels: {
					format: "N0"
				},
				//majorUnit: 10000
			},
			tooltip: {
				visible: true,
				format: "N0"
			}
		});
	}
	
	function createSpitter()
	{
		 $("#horizontal").kendoSplitter({
			panes: [
				{ collapsible: true, size: "170px" }				
			]
		});
	}
	
	function stNumberDaily()
	{
		$.ajax({
            type: 'post',
            url: '/statistic/stSiteNumberDaily',
            data: {                
            },
            dataType: 'json',
            success: function(obj){
				var chart = $("#chartNumberDaily").data("kendoChart");
				chart.refresh();
            },
        });
	}
</script>

<div id="horizontal" style="height: 100%; width: 100%;">
	<div id="left-pane">
		<div class="pane-content">
			<button onclick="stNumberDaily();" class="k-button long">Reset statistic</button>
		</div>
	</div>	
	<div id="right-pane" style="max-height:740px;">
		<div class="pane-content" style="width:800;">
			<div id="chartNumberDaily"></div>
		</div>
	</div>
</div>
